import { useNavigate } from 'react-router-dom'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Home, BarChart3, User } from 'lucide-react'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts'

const WeeklyReport = () => {
  const navigate = useNavigate()

  // 示例数据
  const progressData = [
    { day: 'Mon', vocabulary: 20, accuracy: 15 },
    { day: 'Tue', vocabulary: 45, accuracy: 25 },
    { day: 'Wed', vocabulary: 70, accuracy: 50 },
    { day: 'Thu', vocabulary: 80, accuracy: 60 },
    { day: 'Fri', vocabulary: 90, accuracy: 70 },
    { day: 'Sun', vocabulary: 100, accuracy: 75 }
  ]

  const topMistakes = [
    'acquaintance',
    'entrepreneur', 
    'thoroughfare',
    'conscientious',
    'negligible'
  ]

  return (
    <div className="min-h-screen p-4">
      {/* Header */}
      <div className="text-center mb-6">
        <h1 className="text-2xl font-bold text-gray-800 mb-2">
          ENGLISH LEARNING REPORT
        </h1>
        <p className="text-gray-600">Weekly Report</p>
      </div>

      {/* Progress Chart */}
      <Card className="mb-6 bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">PROGRESS</h2>
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={progressData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="day" />
                <YAxis domain={[0, 100]} />
                <Line 
                  type="monotone" 
                  dataKey="vocabulary" 
                  stroke="#3b82f6" 
                  strokeWidth={3}
                  dot={{ fill: '#3b82f6', strokeWidth: 2, r: 4 }}
                />
                <Line 
                  type="monotone" 
                  dataKey="accuracy" 
                  stroke="#10b981" 
                  strokeWidth={3}
                  dot={{ fill: '#10b981', strokeWidth: 2, r: 4 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </div>
          <div className="flex justify-center gap-6 mt-4">
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-blue-500 rounded-full"></div>
              <span className="text-gray-700">Vocabulary</span>
            </div>
            <div className="flex items-center gap-2">
              <div className="w-4 h-4 bg-green-500 rounded-full"></div>
              <span className="text-gray-700">Accuracy Rate</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Top Mistakes */}
      <Card className="mb-6 bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">TOP 5 MISTAKE WORDS</h2>
          <div className="grid grid-cols-2 gap-2">
            {topMistakes.map((word, index) => (
              <div key={index} className="flex items-center gap-2">
                <span className="text-gray-800">•</span>
                <span className="text-gray-700">{word}</span>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Praise */}
      <Card className="mb-6 bg-white/90 backdrop-blur-sm">
        <CardContent className="p-6">
          <h2 className="text-xl font-bold text-gray-800 mb-4">PRAISE OF THE WEEK</h2>
          <div className="bg-blue-50 p-4 rounded-lg text-center">
            <p className="text-lg text-gray-800">
              Excellent progress this week! Keep it up!
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
        <div className="flex justify-around max-w-md mx-auto">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => navigate('/')}
            className="flex flex-col items-center gap-1"
          >
            <Home size={24} className="text-gray-400" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="flex flex-col items-center gap-1"
          >
            <BarChart3 size={24} className="text-blue-500" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => navigate('/parent')}
            className="flex flex-col items-center gap-1"
          >
            <User size={24} className="text-gray-400" />
          </Button>
        </div>
      </div>
    </div>
  )
}

export default WeeklyReport

